<template>
  <div class="relative w-full h-full">
    <PageHeader :title="t('powerGroup.权限组管理')" />
    <!-- <div class="flex_aic_jcsb">
      <el-input v-model="queryParams.name" :placeholder="t('powerGroup.请输入权限组名称')" style="width: 256px">
        <template #prefix>
          <span class="color-555555">{{ t('powerGroup.权限组名称') }}</span>
        </template>
      </el-input>
      <div class="flex_aic">
        <el-button @click="resetQuery">重置</el-button>
        <el-button type="primary" @click="getList">查询</el-button>
      </div>
    </div> -->
    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'roles:add'">
      <div class="addBtn flex_aic_jcc" @click="editDiaVisible = true">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ t('powerGroup.新增权限组') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      border
      v-loading="loading"
    >
      <el-table-column :prop="'name'" :label="t('powerGroup.序号')" width="80">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column :prop="'name' + locale" :label="t('powerGroup.权限组名称')" />
      <el-table-column :prop="'description' + locale" :label="t('powerGroup.权限组描述')" />
      <el-table-column :label="t('powerGroup.创建时间')">
        <template #default="scope">
          {{ formatTimestamp(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column :label="t('powerGroup.更新时间')">
        <template #default="scope">
          {{ formatTimestamp(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column :label="t('powerGroup.操作')">
        <template #default="scope">
          <div class="flex_aic_jcc">
            <div class="operationBtn">
              <el-button type="text" size="small" @click="handleEdit(scope.row)" v-my-point="'roles:edit'"
                >{{ t('powerGroup.编辑') }}</el-button
              >
            </div>
            <div class="operationBtn">
              <el-button type="text" size="small" @click="handleAuth(scope.row)" v-my-point="'roles:edit'"
                >{{ t('powerGroup.授权') }}</el-button
              >
            </div>
            <el-popconfirm
              :title="t('powerGroup.删除后不可恢复是否确定删除')"
              @confirm="handleDelete(scope.row)"
              :confirm-button-text="t('powerGroup.确定')"
              :cancel-button-text="t('powerGroup.取消')"
              width="300px"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small" v-my-point="'roles:del'">{{ t('powerGroup.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24">
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model="editDiaVisible" :data="editDiaData" @success="submitCallback"></EditDia>
    <AuthTree v-model="authDiaVisible" :data="authDiaData" @success="submitCallback"></AuthTree>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import EditDia from "./editDia.vue";
import AuthTree from "./AuthTree.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import moment from "moment";

const { t, locale } = useI18n();

// 查询参数
const queryParams = ref({
  name: "",
  page: 1,
  size: 10
});
const loading = ref(false);
const total = ref(0);
const editDiaVisible = ref(false);
const editDiaData = ref({});
const authDiaVisible = ref(false);
const authDiaData = ref({});
const tableData = ref([]);

// 格式化时间戳为年月日时分秒
const formatTimestamp = (timestamp) => {
  if (!timestamp) return '--';
  return moment(timestamp).format("YYYY-MM-DD HH:mm:ss");
};

// 获取权限组列表
const getList = async () => {
  loading.value = true;
  try {
    const res = await Api.getPermissionGroupList({
      ...queryParams.value,
      page: queryParams.value.page - 1
    });
    if (res.status === 200) {
      tableData.value = res.data.content || [];
      total.value = Number(res.data.totalElements || 0);
    }
  } catch (error) {
    console.error(t('powerGroup.获取权限组列表失败'), error);
  } finally {
    loading.value = false;
  }

};

// 重置查询
const resetQuery = () => {
  queryParams.value = {
    name: "",
    page: 1,
    size: 10
  };
  getList();
};

// 删除权限组
const handleDelete = async (row) => {
  try {
    await Api.deleteRole([row.id]);
    ElMessage.success(t('powerGroup.删除成功'));
    getList();
  } catch (error) {
    ElMessage.error(t('powerGroup.删除失败'));
    console.error(t('powerGroup.获取权限组列表失败'), error);
  }
};

// 编辑权限组
const handleEdit = async (row) => {
  try {
    const res = await Api.getRoleInfo(row.id);
    if (res.status === 200) {
      editDiaData.value = res.data;
      editDiaVisible.value = true;
    }
  } catch (error) {
    console.error(t('powerGroup.获取权限组详情失败'), error);
  }
};

// 分页大小变更
const handleSizeChange = (size) => {
  queryParams.value.size = size;
  getList();
};

// 页码变更
const handleCurrentChange = (page) => {
  queryParams.value.page = page;
  getList();
};

// 授权权限组
const handleAuth = async (row) => {
  authDiaData.value = JSON.parse(JSON.stringify(row));
  authDiaVisible.value = true;
};

// 提交成功回调
const submitCallback = () => {
  getList();
};

// 页面加载时获取数据
onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
